<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="container">
    {{msg1}}
    <p v-text="msg1"></p>
    <p v-html="msg2"></p>
    <p v-once>{{msg3}}</p>
    <p v-pre>{{msg4}}</p>
    <p v-block>{{msg5}}</p>
    <button @click="change">change</button>
</div>
<script>
    let app = new Vue({
        el: "#container",
        data: {
            msg1: '文本设置<a href = "">baidu</a>',
            msg2: 'html设置<a href = "">baidu</a>',
            msg3: 'v-once,<a href = "">baidu</a>',
            msg4: 'v-pre,<a href = "">baidu</a>',
            msg5: 'v-cloak,<a href = "">baidu</a>'
        },
        method:{
            change:function () {
                this.msg1 = "newtext";
                this.msg2 = "new<i>我的html</i>";
                this.msg3="";

            }

        }
    });

</script>

</body>
</html>